<script setup>
import { ref, watch } from 'vue';

const money = ref(10000);
const add = () => {
  money.value += 1000;
};

const age = ref(20);
const changeAge = () => {
  age.value++;
};
/* 
 watch监视, 接收三个参数
 1. 参数1: 监视的数据源
 2. 参数2: 回调函数
 3. 参数3: 额外的配置
*/
// ✨✨监听单个数据的变化
// watch(money, (value, oldValue) => {
//   console.log('value -----> ', value);
//   console.log('oldValue -----> ', oldValue);
// });

// 监听多个数据的变化
watch([money, age], (value, oldValue) => {
  console.log('value -----> ', value);
  console.log('oldValue -----> ', oldValue);
});
</script>

<template>
  <h1>
    <div>{{ money }}</div>
    <button @click="add">点我+1000工资</button>
    <div>{{ age }}</div>
    <button @click="changeAge">点我年龄+1</button>
  </h1>
</template>
